<template>
	<view class="orderBtnBox">
		<view class="desc">
			¥<text class="price">{{totalPrice}}</text>
			<!-- <view class="smtxt">已优惠 ¥3</view> -->
		</view>
		<view class="btn" @click="handle">{{bottomText}}</view>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
			bottomText:{
				type:String,
				default:'确定'
			}
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				goods:computed(()=>store.state.base.goods), // 选择的商品
				orderInfo:computed(()=>store.state.base.orderInfo), 
				totalPrice:0
			})
			
			onMounted(()=>{
				
			})
			
			state.totalPrice = computed(()=>{
				if(state.goods.length==0) {
					return 0
				}
				let total = 0
				state.goods.forEach(item =>{
					if(state.orderInfo.orderType==1){ // 商城类
						total += (item.unitPrice*item.quantity)
					}else if(state.orderInfo.orderType==2){ // 服务类
						total += (item.price*item.quantity)
					}
					
				})
				if(state.orderInfo.selfServiceFlag==2){ // 配送，需要加运费
					total += state.orderInfo.deliveryFee
				}
				return total.toFixed(2)
			})
			
			const handle = ()=>{
				context.emit('onclick')
			}
			
			return {
				...toRefs(state),
				handle
			}
		}
	})
</script>

<style lang="scss" scoped>
	.orderBtnBox{
		display: flex;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		overflow: hidden;
		.desc{
			display: flex;
			flex: 1;
			background: #240d0f;
			font-size: 28rpx;
			color: #fff;
			padding: 0 0 0 30rpx;
			.price{
				font-size: 36rpx;
				font-weight: bold;
			}
			.smtxt{
				font-size: 26rpx;
				padding: 0 0 0 30rpx;
			}
		}
		.btn{
			width: 200rpx;
			font-size: 34rpx;
			background: #fba70e;
			color: #000;
			font-weight: bold;
			text-align: center;
		}
	}
</style>
